<template>
    <div class="product-list">
        <span>商品列表</span>
        <el-table :data="list" border height="520px">
            <el-table-column label="编号" prop="proid" width="180" align="center"></el-table-column>
            <el-table-column label="商品名称" prop="proname" width="180" align="center"></el-table-column>
            <el-table-column label="商品图片" prop="img1" width="180" align="center">
                <template v-slot="{ row }">
                    <!-- <img  width="100" height="100" :src="row.img1"  alt=""> -->
                    <el-image class="showImg" :src="row.img1" :preview-src-list="[row.img1, row.img2, row.img3, row.img4]"
                        alt=""></el-image>
                </template>
            </el-table-column>
            <el-table-column label="商品原价" prop="originprice" width="180" align="center"></el-table-column>
            <el-table-column label="商品现价" prop="currentprice" width="180" align="center">
                <template v-slot="{ row }">
                    <span v-if="row.discount < 10">{{ ((row.originprice * row.discount) / 10).toFixed(2) }}</span>
                    <span v-else>暂无折扣</span>
                </template>
            </el-table-column>
            <el-table-column label="商品库存" prop="stock" width="180" align="center"></el-table-column>
            <el-table-column label="商品销量" prop="sales" width="180" align="center"></el-table-column>
            <el-table-column fixed="right" label="开启推荐" prop="isrecommend" width="100" align="center" v-if="isSuperAdmin||isAdmin">
                <template v-slot="{ row }">
                    <el-switch v-model="row.isrecommend" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="0" @change="($event)=>{updateRecommendHandler($event,row.proid)}"></el-switch>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="开启秒杀" prop="isseckill" width="100" align="center" v-if="isSuperAdmin||isAdmin">
                <template v-slot="{ row }">
                    <el-switch v-model="row.isseckill" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="0" @change="updateSeckillHandler($event,row.proid)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="查看详情" width="100" align="center">
                <template>
                    <el-button type="primary" size="small">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="page-box">
            <el-pagination 
                background 
                layout="prev, pager, next,total,sizes,jumper" 
                :total="total"
                :current-page.sync="pageParams.count"
                :page-size.sync="pageParams.limitNum"
                :page-sizes="[5,10,20,50]"
                prev-text="上一页"
                next-text="下一页"
                
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { getProListAPI,updateIsSecondkillAPI,updateIsrecommendkillAPI } from "@/api/pro";
import authority from "@/mixins/authority";

export default {
    name: "ProduceListView",
    mixins:[authority],
    data() {
        return {
            pageParams: {
                count: 1,
                limitNum: 5,
            },
            list: [], // 商品列表
            total: null,
        }
    },
    methods: {
        getProList() {
            getProListAPI(this.pageParams).then(res => {
                console.log("商品列表请求成功", res);
                this.list = res.data;
                this.total = res.total;
            }).catch(err => {
                this.$message.error(err.message);
            })
        },
        updateRecommendHandler(flag,proid) {
            console.log("updateRecommendHandler", flag,proid);
            updateIsrecommendkillAPI({
                proid,
                flag:!!flag,
            }).then((res)=>{
                console.log("更新秒杀",res);
            }).catch(err=>{
                this.$message.error(err.message);
            })
        },
        updateSeckillHandler(flag,proid) {
            console.log("updateSeckillHandler", {
                proid,
                flag:!!flag,
            });
            updateIsSecondkillAPI({
                proid,
                flag:!!flag,
            }).then((res)=>{
                console.log("更新秒杀",res);
            }).catch(err=>{
                this.$message.error(err.message);
            })
        },
    },
    watch:{
        pageParams:{
            handler(newVal){
                console.log("pageParams改变了",newVal);
                this.getProList();
            },
            deep:true,
        }
    },
    mounted() {
        this.getProList();
    }
}
</script>

<style scoped>
.showImg {
    width: 50px;
    height: 50px;
}
</style>